<template>
  <div>
    <a-button type="primary" @click="showAddForm">新增</a-button>
    <a-table
      class="width:100%;"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      :data-source="data"
      :row-key="record => record.id"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="showEditForm(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定要删除吗?" @confirm="() => onDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
      <span slot="imagePath" slot-scope="text, record">
        <img v-for="v in getImgList(text)" width="50" :src="imgBase + '/' + v" />
      </span>
    </a-table>

    <a-modal :visible="modalVisible" @ok="handleOk" @cancel="handleCancel" :title="isEdit ? '编辑' : '新增'">
      <a-form :form="form" layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="项目名称" :required="true">
          <a-input v-decorator="['projectName', { rules: [{ required: true, message: '请输入项目名称!' }] }]" />
        </a-form-item>
        <a-form-item label="项目地址" :required="false">
          <a-input v-decorator="['projectAddress', { rules: [{ required: false, message: '请输入项目地址!' }] }]" />
        </a-form-item>
        <a-form-item label="业主单位" :required="false">
          <a-input v-decorator="['projectUnit', { rules: [{ required: false, message: '请输入业主单位!' }] }]" />
        </a-form-item>
        <a-form-item label="项目负责人" :required="true">
          <a-input v-decorator="['projectUser', { rules: [{ required: true, message: '请输入项目负责人!' }] }]" />
        </a-form-item>
        <a-form-item label="职务" :required="false">
          <a-input v-decorator="['projectUserJob', { rules: [{ required: false, message: '请输入职务!' }] }]" />
        </a-form-item>
        <a-form-item label="联系电话" :required="false">
          <a-input v-decorator="['projectUserPhone', { rules: [{ required: false, message: '请输入联系电话!' }] }]" />
        </a-form-item>
        <a-form-item label="中标时间" :required="true">
          <a-date-picker
            v-decorator="['winnerDate', { rules: [{ required: true, message: '请选择中标时间!' }] }]"
            format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="合同金额" :required="true">
          <a-input-group compact :compact="true" style="display: flex;align-items: center;">
            <a-input-number
              v-decorator="['contractAmount', { rules: [{ required: true, message: '请输入合同金额!' }] }]"/>万
            <a-select
              v-decorator="['amountUnit', { rules: [{ required: true, message: '请选择货币类型!' }] }]"
              placeholder="请选择货币类型"
              style="width: 120px;"
              :options="legal_type['money_type']"
            >
            </a-select
          ></a-input-group>
        </a-form-item>

        <a-form-item label="项目规模" :required="false">
          <a-input v-decorator="['projectScope', { rules: [{ required: false, message: '请输入项目规模!' }] }]" />
        </a-form-item>

        <a-form-item label="业绩概述" :required="false">
          <a-textarea v-decorator="['remark', { rules: [{ required: false, message: '请输入业绩概述!' }] }]" />
        </a-form-item>

        <a-form-item label="业绩证明图片" :required="true">
          <j-upload v-decorator="['imagePath', { rules: [{ required: true, message: '请上传附件' }] }]"></j-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import {
  Modal,
  Form,
  Input,
  DatePicker,
  Upload,
  Button,
  Icon,
  message,
  Table,
  Popconfirm,
  Divider,
} from 'ant-design-vue'
import moment from 'moment'
import { axios } from '@/utils/request'
import { mapGetters } from 'vuex'
import { tableMixin, tableImgMixin } from '@views/user/register/reg_components/mixin'

export default {
  name: 'step5',
  components: {
    AModal: Modal,
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    ADatePicker: DatePicker,
    AUpload: Upload,
    AButton: Button,
    AIcon: Icon,
    ATable: Table,
    APopconfirm: Popconfirm,
    ADivider: Divider,
  },
  mixins: [tableMixin, tableImgMixin],
  data() {
    return {
      legal_type: {},
      form: this.$form.createForm(this),
      modalVisible: false,
      isEdit: false,
      currentRecord: {},
      data: [], // 这里应该是从后端获取的数据
      columns: [
        { title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
        { title: '中标时间', dataIndex: 'winnerDate', key: 'winnerDate' },
        { title: '合同金额', dataIndex: 'contractAmount', key: 'contractAmount' },

        { title: '金额单位', dataIndex: 'amountUnit', key: 'amountUnit' },
        { title: '业绩证明图片', dataIndex: 'imagePath', key: 'imagePath', scopedSlots: { customRender: 'imagePath' } },

        { title: '操作', scopedSlots: { customRender: 'action' }, key: 'action' },
      ],
      fileList: [],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  props: {
    canFix: {
      type: Boolean,
    },
    // 基本类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    legalCode: String,
  },
  created() {
    this.getUserType('money_type')
    this.getData()
  },
  methods: {
    getUserType(userType) {
      this.$http.get('/register/common/getDictItems/' + userType).then(r => {
        this.$set(this.legal_type, userType, r.result)
      })
    },
    showAddForm() {
      this.modalVisible = true
      this.isEdit = false
      this.currentRecord = {}

      this.form.resetFields()
    },
    showEditForm(record) {
      this.modalVisible = true
      this.isEdit = true
      this.currentRecord = { ...record }
      this.$nextTick(() => {
        this.form.setFieldsValue({
          amountUnit: record.amountUnit,
          contractAmount: record.contractAmount,
          id: record.id,
          imagePath: [record.imagePath], // 假设这里只有一个文件
          legalCode: record.legalCode,
          projectAddress: record.projectAddress,
          projectName: record.projectName,
          projectScope: record.projectScope,
          projectUnit: record.projectUnit,
          projectUser: record.projectUser,
          projectUserJob: record.projectUserJob,
          projectUserPhone: record.projectUserPhone,
          remark: record.remark,
          winnerDate: moment(record.winnerDate),
        })
      })
    },
    hideForm() {
      this.modalVisible = false
    },
    handleOk(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          let obj = _.cloneDeep(values)
          Object.keys(obj).forEach(k => {
            if (Array.isArray(obj[k])) {
              obj[k] = obj[k].join()
            }
          })
          obj.legalCode = this.legalCode
          obj.id = this.currentRecord.id
          let url
          if (this.isEdit) {
            url = '/register/subjectLegalProved/edit'
          } else {
            url = '/register/subjectLegalProved/add'
          }
          axios.post(url, obj).then(v => {
            this.hideForm()
            this.getData()
          })
        }
      })
    },
    getData() {
      axios
        .get('/register/subjectLegalProved/list', {
          params: { legalCode: this.legalCode, pageSize: this.pagination.pageSize, pageNo: this.pagination.current },
        })
        .then(r => {
          this.data = r.result?.records
          this.pagination.total = r.result?.total
        })
    },
    handleCancel() {
      this.hideForm()
    },
    onDelete(record) {
      axios.delete('/register/subjectLegalProved/delete?id=' + record.id).then(r => {
        this.$message.success('删除成功')
        this.getData()
      })
    },
  },
}
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>
